<template>
  <div class="list container">
    <wj-page-back content="资料中心"/>
    <wj-title title="资料列表"/>
    <h3 class="type">每日一点点</h3>
    <el-table
        :data="documentList"
        :stripe="true"
        style="width: 100%;">
      <el-table-column
          prop="id"
          label="序号"
          :formatter="formatOrder"
          width="180"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="file_name"
          label="标题"
          width="360"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="file_size"
          label="大小"
          :formatter="formatSize"
          width="180"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="operate"
          label="操作"
          align="center"
      >
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handlePreview(scope.$index, scope.row)">预览
          </el-button>
          <el-button
              size="mini"
              type="success"
              plain
              @click="handleDownload(scope.$index, scope.row)">下载
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="demo-image__preview">
      <el-image
          style="width: 0; height: 0;"
          :src="previewSrc"
          :preview-src-list="[previewSrc]"
          id="show_img"
      >
      </el-image>
    </div>

    <div style="padding-top: 30px; padding-bottom: 20px; text-align: left">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="count"
          @prev-click="handlePageChange"
          @next-click="handlePageChange"
          @current-change="handlePageChange"
      >
      </el-pagination>
    </div>

  </div>
</template>

<script>
  import wjPageBack from "@/components/wj-page-back";
  import wjTitle from "@/components/wj-title";
  import {getDocumentList} from "@/mock-data/documentList";
  import {scrollAnimation} from "@/utils/scroll";

  export default {
    name: "ExampleList",
    data() {
      return {
        page: 1,
        size: 10,
        count: 0,
        documentList: [],
        previewSrc: "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1801567586,3630522687&fm=26&gp=0.jpg",
        isShowImg: false
      }
    },
    components: {
      wjPageBack,
      wjTitle
    },
    methods: {
      handleClick(title) {
        this.$router.push({
          path: `/documentList/${title}`
        })
      },
      formatOrder(row, column, cellValue, index) {
        return (this.page - 1) * 10 + index + 1;
      },
      formatSize(row, column, cellValue) {
        if (cellValue > 1024 && cellValue < 1024 * 1024) {
          return Math.floor(cellValue / 1024) + "kb";
        }
        return (cellValue / 1024 / 1024).toFixed(2) + "M";
      },
      handlePreview(index, row) {
        this.previewSrc = "https://developer.duyiedu.com" + row.file_path;
        document.getElementById("show_img").click();
      },
      handleDownload(index, row) {
        const downloadUrl = "https://developer.duyiedu.com" + row.file_path + "?response-content-type=application/octet-stream";
        const a = document.createElement("a");
        a.download = row.file_name;
        a.href = downloadUrl;
        console.log(a);
        a.click();
      },
      handlePageChange(page) {
        this.page = page;
        const result = getDocumentList(this.page, this.size);
        this.documentList = result.list;
      }
    },
    created() {
      scrollAnimation(window.scrollY, 0);
      const result = getDocumentList(this.page, this.size);
      this.documentList = result.list;
      this.count = result.count;
    },
    mounted() {
      let img = document.getElementById("show_img");
      img && img.click();
    }
  }
</script>

<style scoped>
  .list {
    padding-top: 62px;
    min-height: 100vh;
  }

  ul {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
  }

  .type {
    color: #333;
    font-size: 18px;
    padding-left: 13px;
  }

</style>